<template>
    <div class="ai-assistant">
      <h2>AI智能助手</h2>
      <el-input
        v-model="query"
        placeholder="请输入农业相关问题"
        style="width: 100%; margin-bottom: 20px"
      />
      <el-button type="primary" @click="handleQuery">立即咨询</el-button>
      <div v-if="answer" class="answer-box">
        <h4>回答：</h4>
        <p>{{ answer }}</p>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  
  const query = ref('')
  const answer = ref('')
  
//   const handleQuery = () => {
//     // 模拟AI响应
//     answer.value = `关于"${query.value}"的农业知识：${Math.random().toString(36).substring(7)}`
//   }
  </script>
  
  <style scoped>
  .ai-assistant {
    padding: 20px;
  }
  
  .answer-box {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #eee;
  }
  </style>